<template>
  <div class="top" style="display: flex; justify-content: space-between; align-items: center;">
    <div class="topLeft" style="height: 100%; padding:0 10px 0 10px; display: flex; margin-left: 10%; opacity: 1; align-items: center;">
      <el-image style="height:100%" src="../../../public/images/Logo/FB_text.jpg"></el-image>
    </div>
  </div>

  <div class="totalContent">
    <div class="content" style="display: flex; justify-content: center;">
      <div class="contentRight" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
        <div style="width: 60%; height: auto;">
          <el-form ref="formRef" :model="form" :rules="rules" style="width:100%;">
            <el-form-item style="display: flex; justify-content: center; width: 100%; padding: 0;">
              <div style="margin-left: auto; margin-right: auto">
                <h1>{{title0}}</h1>
              </div>
            </el-form-item>

            <el-form-item style="height: 80px; padding-bottom: 10px; align-items: center;">
              <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :on-change="handleFileChange"
                :before-upload="beforeAvatarUpload"
                :auto-upload="false">
                <div class="avatar-container">
                  <el-image :src="avatar" style="width: 100%; height: 100%; object-fit: cover;" />
                </div>
                <span style="font-size: 24px;margin-left: 15px">头像 ></span>
              </el-upload>
            </el-form-item>

            <el-form-item prop="nickname">
              <div style="display: flex; width: 100%;">
                <span style="flex: 3; padding-left: 30px;">昵称：</span>
                <el-input v-model="form.nickname" type="text" style="flex: 7; padding-right: 30px;" placeholder="请填写昵称"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="name">
              <div style="display: flex; width: 100%;">
                <span style="flex: 3; padding-left: 30px;">姓名：</span>
                <el-input v-model="form.name" type="text" style="flex: 7; padding-right: 30px;" placeholder="请填写姓名"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="phone">
              <div style="display: flex; width: 100%;">
                <span style="flex: 3; padding-left: 30px;">手机号：</span>
                <el-input v-model="form.phone" style="flex: 7; padding-right: 30px;" placeholder="请填写手机号"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="address">
              <div style="display: flex; width: 100%;">
                <span style="flex: 3; padding-left: 30px;">地址：</span>
                <el-cascader v-model="form.address" placeholder="请选择你的地址" :options="pcaTextArr" style="margin-right: 30px; flex: 7;"></el-cascader>
              </div>
            </el-form-item>

            <el-form-item prop="birthday">
              <div style="display: flex; width: 100%;">
                <span style="flex: 3; padding-left: 30px;">生日：</span>
                <el-date-picker v-model="form.birthday" type="date" value-format="YYYY-MM-DD" placeholder="请选择生日" style="flex: 7; padding-right: 30px;"></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item style="width: 100%;">
              <div style="width: 100%; display: flex; justify-content: space-evenly;">
                <el-button type="primary" @click="deleteButton" style="width: 40%;">
                  清空
                </el-button>
                <el-button type="primary" @click="submit" style="width: 40%;">
                  提交
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="bottom">
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { pcaTextArr } from 'element-china-area-data';
import { Path } from '@/constant/index';
import { get, post } from '@/plugins/axios';
import router from '@/router';
import { filterFields } from 'element-plus/es/components/form/src/utils';

/* xinxi */
let title0 = ref('请继续完善信息');
let avatar = ref('https://ts1.cn.mm.bing.net/th/id/R-C.0cdcfe3753c0020563ab36e76061e152?rik=Gp5POEoKuvIBIQ&riu=http%3a%2f%2fimg.51miz.com%2fElement%2f00%2f78%2f93%2f64%2f67b2bf18_E789364_1f9c0297.png!%2fquality%2f90%2funsharp%2ftrue%2fcompress%2ftrue%2fformat%2fpng%2ffh%2f630&ehk=jpVpc7cXzAag1xpnYr6ThhF1gG9cA7N9%2fXBrZOczQ5c%3d&risl=&pid=ImgRaw&r=0');
/* xinxi */

const form = ref({
  nickname: null,
  name: null,
  phone: null,
  address: null,
  birthday: null,
  file: null
});

function check(rule, value, callback) {
  let params = {
    column: rule.fieldName,

    value,
  };
  get(Path.phoneCheck, params, content => {
    if (content) {
      callback();
    } else {
      callback(new Error());
    }
  });
}

const rules = reactive({
  nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入正确的中国手机号', trigger: 'blur' },
    { validator: check, message: '该手机号已经被使用了', trigger: 'blur', fieldName: 'phone' }
  ],
  address: [{ required: true, message: '地址不能为空', trigger: 'change' }],
  birthday: [{ required: true, message: '生日不能为空', trigger: 'change' }]
});

function concatenateStrings(arr, separator = '') {
  return arr.join(separator);
}

function submit() {  
  formRef.value.validate((valid) => {  
    if (valid) {  
        post(Path.completeInformation,{
            name: form.value.name,
            nickName: form.value.nickname,
            birthday: form.value.birthday,
            phone: form.value.phone,
            address:concatenateStrings(form.value.address, ' '),
             file: form.value.file
        },content => {
            if(content === "用户登入"){
                // 跳转到另一个页面
                router.push("/")
            } 
             if(content === "商家登入"){
                // 跳转到另一个页面
                // 初始化商店
                post(Path.createShop,{
                },content => {
                    router.push("/shop/shop_information")
                })
            } 
        })
    } else {  
      return false;  
    }  
  });  
}  
  
const formRef = ref(null);  

/* 清空编辑，删除后显示修改之前内容 */
const deleteButton = () => {
  /* 默认头像 */
  avatar.value = 'https://ts1.cn.mm.bing.net/th/id/R-C.0cdcfe3753c0020563ab36e76061e152?rik=Gp5POEoKuvIBIQ&riu=http%3a%2f%2fimg.51miz.com%2fElement%2f00%2f78%2f93%2f64%2f67b2bf18_E789364_1f9c0297.png!%2fquality%2f90%2funsharp%2ftrue%2fcompress%2ftrue%2fformat%2fpng%2ffh%2f630&ehk=jpVpc7cXzAag1xpnYr6ThhF1gG9cA7N9%2fXBrZOczQ5c%3d&risl=&pid=ImgRaw&r=0';
  form.value.nickname = null;
  form.value.name = null;
  form.value.phone = null;
  form.value.address = null;
  form.value.birthday = null;
};

const handleFileChange = (file) => {
   avatar.value = URL.createObjectURL(file.raw)
  form.value.file = file.raw
};

const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg';
  const isPNG = file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG && !isPNG) {
    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return (isJPG || isPNG) && isLt2M;
};
</script>

<style scoped lang="scss">
* {
  border: 0px;
  padding: 0px;
  box-sizing: border-box;
}

a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}

ul {
  list-style: none;
}

.top {
  height: 48px;
  width: 100%;
  background-color: #333333;
  opacity: 0.985;
}

.totalContent {
  width: 80%;
  height: 100%;
  margin: 0 10% 0 10%;
  .content {
    height: 620px;
    width: 100%;
    padding-top: 10%;
    /* border: 0.667px black solid; */
    .contentLeft {
      height: 500px;
      width: 20%;
      /*  border:0.667px black solid; */
      .s1 {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }
    }
    .contentRight {
      height: 500px;
      width: 60%;
      .avatar-container {
        border: 0.667px black solid;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0; /* 默认背景颜色，可根据需要调整 */
      }
    }
  }
}
</style>